@import './_function.less';

body{
    background-color: #e3e3e3;
    .header{
        background-color: #fff;
        .mb(20);
        .w(750);
        .pb(34);
        .top{
            overflow: hidden;
            background-color: #ff8f00;
            .pl(20);
            .scanning{
                .pt(22);
                .pb(22);
                cursor: pointer;
                float: left;
                .w(44);
                .h(44);
            }
            label{
                display: inline-block;
                position: relative;
                .fl;
                .pt(18);
                .pb(18);
                .ml(110);
                &:after{
                    content: '';
                    display: block;
                    position: absolute;
                    background:url("../img/search.png")no-repeat;
                    background-size: 100%;

                    .w(42);
                    .h(42);
                    .t(22);
                    .l(12);
                    cursor: pointer;
                }
                input{
                    .lh(50);
                    .br(50);
                    .ti(76);
                    border: none;
                    color: #999;
                    .w(400);
                    .fs(28);

                }
            }
            .mold{
                float: right;
                cursor: pointer;
                .pr(20);
                .pt(26);
                .w(40);
                .h(36);
            }
        }
        .banner{
            a{
                img{
                    cursor: pointer;
                    .w(750)
                }
            }
        }
        .nav{
            overflow: hidden;
            .mt(32);
            li{
                text-align: center;
                float: left;
                .w(750/4);
                a{
                    .tdn();
                    display: inline-block;
                    img{
                        .w(90);
                        .h(90);
                        .ml(12)
                    }
                    p{
                        .mt(10);
                        .fs(28);
                        .tc();
                        .c(#000)
                    }
                }
            }
        }
    }
    .discount{
        background-color: #fff;
            .pt(30);
            .title{
                .fs(36);
                border-left: 6/@x solid #ffc500;
                .mb(30);
                .ml(20);
            }
            .tags{
                overflow: hidden;
                .mb(20);
                li{
                    float: left;
                    .ml(20);
                    .w(345);
                    .mb(50);
                        a{
                            display: inline-block;
                            .discount-img{
                                .w(345);
                                border: 1px solid #e5e5e5;
                                text-align: center;
                                img {
                                    display: inline-block;
                                    .w(345);
                                }
                            }
                            p{
                                .mt(10);
                                .fs(24);
                                color: #3f3f3f;
                                .lh(28);
                            }

                    }

                }
            }
        }
    .recommend{
        .mb(20);
        background-color: #fff;
        .pt(30);
            .title{
                .fs(36);
                border-left: 6/@x solid #ffc500;
                .mb(30);
                .ml(20);
            }
            .tags{
                .pb(50);
                overflow: hidden;
                .left{
                    .w(345);
                    float: left;
                    .ml(20);
                    .mr(20);
                    a{
                        .left-img{
                            border: 1px solid #e5e5e5;
                            .w(345);
                            img{
                                .w(343);
                            }
                        }

                        p{
                            .lh(28);
                            .mt(10);
                            .fs(24);
                            color: #3f3f3f;
                        }
                    }
                }
                .right{
                    float: left;
                    .w(345);
                    .right-top{
                        display:block;
                        .right-img{
                            overflow: hidden;
                            .w(343);
                            border: 1px solid #e5e5e5;
                            .img-o{
                                .w(196);
                                display: inline;
                                .fl;
                            }
                            .img-f{
                                .w(147);
                                display: inline;
                                .fr;
                            }
                        }
                        p{
                            .lh(28);
                            .fs(24);
                            color: #3f3f3f;
                            .mt(8);

                        }
                    }
                    .right-bottom{
                        .mt(10);
                        display: block;
                        .right-imgs{
                            .w(343);
                            border: 1px solid #e5e5e5;
                            img{
                                .w(343);
                            }
                        }
                        p{
                            .lh(28);
                            .fs(24);
                            color: #3f3f3f;
                            .mt(8);

                        }
                    }
                }
            }
        }
    .hot{
        background-color: #fff;
        .pt(30);
        .title{
            .fs(36);
            border-left: 6/@x solid #ffc500;
            .mb(30);
            .ml(20);
        }
        .pads-o{
            border: 1px solid #e5e5e5;
            .w(750);
            .h(228);
            .mb(30);
            display:block;
            .pads-tags{
                .h(228);
                .w(750);
                img{
                    .w(750)
                }
                position: relative;
                span{
                    position: absolute;
                    .pl(20);
                    .b(10);
                    .fs(24);
                    color: #0b0b0b;
                }
            }
        }
        .pads-f{
            border: 1px solid #e5e5e5;
            .w(750);
            .h(228);
            .mb(30);
            display:block;
            .pads-tags{
                .h(228);
                .w(750);
                position: relative;
                img{
                    .w(750)
                }
                span{
                    position: absolute;
                    .pl(20);
                    .b(10);
                    .fs(24);
                    color: #0b0b0b;
                }
            }
        }
        .pads-t{
            border: 1px solid #e5e5e5;
            .w(750);
            .h(228);
            .pb(30);
            display:block;
            .pads-tags{
                .h(228);
                .w(750);
                position: relative;
                img{
                    .w(750)
                }
                span{
                    position: absolute;
                    .pl(20);
                    .b(10);
                    .fs(24);
                    color: #0b0b0b;
                }
            }
        }
    }
    .footer{
        .h(210);
        text-align: center;
        .pt(10);
        img{
            margin: 0 auto;
            .mb(22);
            .w(5);
            display: block;
        }
        .btn{
            display: inline-block;
            border-radius:50%;
            background-color: #ff8f00;
            color: #ffffff;
            .w(90);
            .h(90);
            .lh(28);
            span{
                .fs(24);
                .w(78);
                .dib();
                .mt(16);
            }
        }
    }
    .menu-bar {
        .h(98);
        .w(750);
        .b(0);
        .l(0);
        .bc(@mainColor);
        display: flex;
        .list {
            width: 20%;
            .fl;
            .tc; // .lh(98);
            .c(@cW);
            &.on {
                .bc(#eab826);
            }
            i {
                .fs(24);
                .c(@cW);
            }
        }
        .icon {
            .w(60);
            .h(60);
            .db;
            margin: 0 auto;
            .bs(60, 60);
            background-repeat: no-repeat;
            &.icon-home {
                background-image: url('../img/icon-home.png');
            }
            &.icon-type {
                background-image: url('../img/icon-type.png');
            }
            &.icon-shop {
                background-image: url('../img/icon-shop.png');
            }
            &.icon-order {
                background-image: url('../img/icon-order.png');
            }
            &.icon-user {
                background-image: url('../img/icon-user.png');
            }
        }
    }
}

